<template>
	<view class="page" :style="{minHeight:$height()}">
		<view class="header">
			<view class="headerTop">
				<view class="headerTopTitle">
					预估佣金金额
				</view>
				<view class="moneyBox">
					<view class="moneyIco">
						￥
					</view>
					<view class="money">
						{{commissionCount.totalMoney||'0.00'}}
					</view>
				</view>
			</view>
			<view class="headerBom">
				<view class="headerBomLeft">
					<view class="foodterTxt">
						合同累计
					</view>
					<view class="foodterContent">
						{{commissionCount.totalCustom||0}}家
					</view>
				</view>
				<view class="headerBomCenter">
				</view>
				<view class="headerBomRight">
					<view class="foodterTxt">
						累计签约电量
					</view>
					<view class="foodterContent">
						{{commissionCount.totalPower||0}}万千瓦时
					</view>
				</view>
			</view>
		</view>
		<view class="tip">
			<text class="ming">*</text>
			<text>该佣金为预估金额，实际佣金最终依据签约客户实际用电量为
				计算依据</text>
		</view>
		<view class="qianyue">
			<view class="line">
			</view>
			<view class="qianyueTitle">
				签约明细
			</view>
			<view class="line">
			</view>
		</view>

		<view class="item" v-for="(item,index) in list" :key="index">
			<view class="companyName">
				{{item.custom.companyName}}
			</view>
			<view class="accountNumber">
				户号：{{item.custom.houseNum}}
			</view>
			<view class="electricQuantity" style="margin-top: 24rpx;">
				预估电量：{{item.custom.electricityNum}}万千瓦时
			</view>
			<view class="electricQuantity" style="margin-top: 5rpx;">
				预估金额：￥ {{item.income}}
			</view>
			<view class="date">
				签订日期：{{item.createDate}}
			</view>
		</view>
		<!-- 加载更多 -->
		<u-loadmore v-if="list.length !== 0" :status="status" :load-text="loadText" />
		<image v-else src="@/static/image/empty.png" mode="widthFix" class="is-empty"></image>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 页面数据初始化状态
				loadText: {
					loadmore: '轻轻上拉，加载更多',
					loading: '努力加载中',
					nomore: '我也是有底线的'
				},
				commissionCount:{},
				more: false,
				page: 1, //页码
				limit: 10, //条数
				list: []
			}

		},
		//下拉刷新
		onPullDownRefresh() {
			this.page = 1
			this.getMyCommissionRes()
		},
		//上拉加载
		onReachBottom() {
			if (this.page == 1) {
				return
			}
			if (this.more) {

				this.getMyCommissionRes()
			}
		},
		onLoad() {
			this.getMyCommissionRes()
		},
		onShow() {
			this.getCommissionCount()
		},
		methods: {
			getCommissionCount(){
				this.$axios.request(this.$api.getCommissionCount,"GET").then((val)=>{
					this.commissionCount = val.data
				})
			},
			getMyCommissionRes() {
				this.$axios.request(this.$api.getMyCommissionRes, "GET", {
					page: this.page,
					limit: 10,
					type: '0',
					orderField: 'id',
					order: 'desc'
				}).then((val) => {

					uni.stopPullDownRefresh();
					this.list = this.page == 1 ? val.data.list : this.list.concat(val.data.list)
					if (Math.ceil(val.data.total / this.limit) > this.page) {
						this.more = true;
						this.page++
					} else {
						this.more = false;
					}
				})
			},
		}
	}
</script>

<style>
	.page {
		width: 100%;
		background-color: #F5F5F5;
		overflow-y: hidden;
	}

	.header {
		overflow: hidden;
		width: 100%;
		height: 258rpx;
		background-color: #3975EA;
	}

	.headerTop {
		overflow-y: hidden;
		width: 100%;
		height: 167rpx;
	}

	.headerTopTitle {
		text-align: center;
		height: 33rpx;
		font-size: 24rpx;
		font-family: "PingFang SC";
		font-weight: 300;
		line-height: 33rpx;
		color: #FFFFFF;
		margin: 36rpx auto 6rpx;
	}

	.moneyBox {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.moneyIco {
		height: 33rpx;
		font-size: 24rpx;
		font-family: 'PingFang SC';
		font-weight: 300;
		line-height: 33rpx;
		color: #FFFFFF;
	}

	.money {
		height: 50rpx;
		font-size: 36rpx;
		font-family: "PingFang SC";
		font-weight: 600;
		line-height: 50rpx;
		color: #FFFFFF;
		margin-left: 12rpx;
	}

	.headerBom {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 90rpx;
		background-color: #578CF3;
	}

	.headerBomLeft,
	.headerBomRight {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 50%;
		height: 100%;
	}

	.headerBomCenter {
		width: 2rpx;
		height: 61rpx;
		background: rgba(255, 255, 255, 0.3900);
	}

	.foodterTxt {
		font-size: 24rpx;
		font-family: "PingFang SC";
		font-weight: 500;
		color: #FFFFFF;
	}

	.foodterContent {
		font-size: 24rpx;
		font-family: "PingFang SC";
		font-weight: 600;
		color: #FFFFFF;
		margin-top: 5rpx;
	}

	.tip {
		width: 668rpx;
		margin: 24rpx auto;
		height: 66rpx;
		font-size: 25rpx;
		font-family: "PingFang SC";
		font-weight: 600;
		line-height: 33rpx;
		color: #FF2D55;
	}

	.ming {
		margin: 5rpx 5rpx 0 0;
		line-height: 15rpx;
	}

	.qianyue {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 auto 24rpx;
	}

	.line {
		width: 23rpx;
		height: 2rpx;
		background-color: #999999;
	}

	.qianyueTitle {
		height: 40rpx;
		font-size: 28rpx;
		font-family: "PingFang SC";
		font-weight: 600;
		line-height: 40rpx;
		color: #333333;
		margin: 0 10rpx;
	}

	.item {
		overflow: hidden;
		width: 100%;
		height: 270rpx;
		background-color: #fff;
		margin-bottom: 16rpx;
		padding: 0 32rpx;
	}

	.companyName {
		height: 40rpx;
		font-size: 28rpx;
		font-family: "PingFang SC";
		font-weight: 300;
		line-height: 40rpx;
		color: #333333;
		margin-top: 16rpx;
	}

	.accountNumber {
		height: 47rpx;
		font-size: 24rpx;
		font-family: "PingFang SC";
		font-weight: 300;
		line-height: 40rpx;
		color: #999999;
		margin-top: 4rpx;
		border-bottom: 1rpx solid #F1F1F1;

	}

	.electricQuantity {
		font-size: 24rpx;
		font-family: "PingFang SC";
		font-weight: 300;
		color: #333333;
	}

	.date {
		height: 33rpx;
		font-size: 24rpx;
		font-family: "PingFang SC";
		font-weight: 300;
		line-height: 33rpx;
		color: #666666;
		margin-top: 24rpx;
	}
</style>
